<template>
  <div>
    <h1>{{time}}</h1>
    <h1>{{router.query.id}}</h1>
    姓名:<input type="text" v-model="add_name" /> 手机号:<input
      type="number"
      v-model="add_phone"
    />
    年龄:<input type="number" v-model="add_age" /><br> 爱好:<label
      v-for="(item, index) in date"
      :key="index"
    >
      <input type="checkbox" :value="item" v-model="optfor" /> {{ item }}
    </label><br>
    性别:<label v-for="(item,index) in sex" :key="index">
        <input type="radio" :value="item" v-model="add_sex">{{item}}
    </label><br>
    地区:<select v-model="add_pull">
      <option v-for="(item,index) in pull" :key="index" :value="item">{{item}}</option>
    </select><br>
    <button @click="add()">添加</button><br>
    <button @click="sort()">年龄从小到大</button>
    <table border="1" style="width: 100%; text-align: center">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>手机号</th>
          <th>年龄</th>
          <th>性别</th>
          <th>爱好</th>
          <th>地区</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in arr" :key="index" v-highlight-row="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.hobby }}</td>
          <td>{{ item.region }}</td>
          <td><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import router from "@/router";
import { inject, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import {useTime} from "@/hooks/useTime"

export default {
  directives: {
    "highlight-row": {
      mounted(el, binding) {
        const index = binding.value;
        el.style.backgroundColor = index % 2 === 0 ? "red" : "green";
      },
      updated(el, binding) {
        const index = binding.value;
        el.style.backgroundColor = index % 2 === 0 ? "red" : "green";
      },
    },
  },
  setup() {
    let time = useTime()
    let router = useRoute()
    let add_name = ref();
    let add_phone = ref();
    let add_age = ref();
    let date = inject("checkbox");
    let sex = inject("sex")
    let pull = inject("pull")
    let optfor = ref([]);
    let add_sex = ref([])
    let add_pull = ref([])
    let arr = reactive([
      {
        id: 1,
        name: "张三",
        phone: 12314142351,
        age: 18,
        hobby: "HTML,CSS,JS",
        sex:"男",
        region:"亚洲"
      },
      {
        id: 2,
        name: "李四",
        phone: 123421323243,
        age: 20,
        hobby: "VUE,JS",
        sex:"女",
        region:"欧洲"
      },
      {
        id: 3,     
        name: "王五",
        phone: 12343534633,
        age: 10,
        hobby: "HTML,CSS",
        sex:"男",
        region:"非洲"
      },
    ]);
    // 添加
    function add() {
      arr.push({
        id: arr.length + 1,
        name: add_name.value,
        phone: add_phone.value,
        age: add_age.value,
        hobby: String(optfor.value),
        sex:String(add_sex.value),
        region:String(add_pull.value)
      });
    }
    // 删除
    function del(index) {
      arr.splice(index, 1);
    }
    // 排序
    function sort() {
      arr.sort((a, b) => a.age - b.age);
    }
    return { arr, add, add_age, add_name, add_phone, del, sort, date, optfor,sex,add_sex,pull,add_pull,router,time};
  },
};
</script>